<template>
    <div class="enterprise-overall-setting">
        <div class="enterprise-title">
            {{ $t('setting.enterprise.overall.title') }}
        </div>
        <div class="enterprise-content">
            <div class="enterprise-domain" v-if="isShowDomain">
                <div class="enterprise-domain-title">
                    <div class="enterprise-domain-title-content">{{ $t('setting.enterprise.overall.domain.title') }}</div>
                    <div class="enterprise-domain-title-tip">{{ $t('setting.enterprise.overall.domain.tip1') }}</div>
                </div>
                <div class="enterprise-domain-content">
                    <div class="domain">
                        <div class="title">
                            <div>{{ $t('setting.enterprise.overall.domain.address') }}：</div>
                            <div>{{ domainAddress || '-' }}</div>
                        </div>
                        <el-button type="text" @click="openDialog(1)" v-if="!domainAddress">{{ $t('setting.enterprise.overall.domain.goApply') }}</el-button>
                        <el-button type="text" @click="copyToClipboard" v-if="applyStatus === '1'">{{ $t('common.base.copyLink') }}</el-button>
                        <el-button type="text" @click="openDialog(0)" v-if="applyStatus === '0'">{{ $t('common.base.edit1') }}</el-button>
                        <div class="status">
                            <div>{{ $t('common.form.preview.relatedPart.approveStatus') }}：</div>
                            <i :class="{ domainStateSuccess: applyStatus === '1', domainStateReview: applyStatus === '0' }"></i>
                            <div>{{ applyStatus === '1'? $t('setting.enterprise.status1'): applyStatus === '0' ? $t('common.base.underReview') : '-' }}</div>
                        </div>
                    </div>
                    <!-- <div class="organization">
                        <div class="title">
                            <div>{{ $t('setting.enterprise.overall.domain.code') }}：</div>
                            <div>{{ organizationCode || '-' }}</div>
                        </div>
                        <el-button type="text" @click="applyOrganization" v-if="!organizationCode">{{ $t('setting.enterprise.overall.domain.goApply') }}</el-button>
                        <div class="status">
                            <div>{{ $t('common.form.preview.relatedPart.approveStatus') }}：</div>
                            <i :class="{ domainStateSuccess: organizationCodeStatus === '1', domainStateReview: organizationCodeStatus === '0' }"></i>
                            <div>{{ organizationCodeStatus === '1'? $t('setting.enterprise.status1'): organizationCodeStatus === '0' ? $t('common.base.underReview') : '-' }}</div>
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="enterprise-color">
                <div class="enterprise-color-title">
                    {{ $t('setting.enterprise.overall.color.title') }}
                </div>
                <div class="enterprise-color-content">
                    <div class="enterprise-color-content-left">
                        <div class="enterprise-color-content-left-item">
                            <div class="enterprise-color-content-left-item-title">{{ $t('setting.enterprise.overall.color.backgroundColor') }}</div>
                            <el-color-picker v-model="navBgColor"></el-color-picker>
                            <div v-if="!isSuitableNavBgColor" class="enterprise-color-content-left-item-tip">
                                {{ $t('setting.enterprise.overall.color.tip2') }}
                            </div>
                        </div>
                        <div class="enterprise-color-content-left-item">
                            <div class="enterprise-color-content-left-item-title">{{ $t('setting.enterprise.overall.color.systemColor') }}</div>
                            <el-color-picker v-model="systemThemeColor"></el-color-picker>
                            <div v-if="!isSuitableSystemColor" class="enterprise-color-content-left-item-tip">
                                {{ $t('setting.enterprise.overall.color.tip2') }}
                            </div>
                            <div v-if="!isAndroidColor" class="enterprise-color-content-left-item-tip">
                                {{ $t('setting.enterprise.overall.color.tip3') }}
                            </div>
                        </div>
                        <div class="enterprise-color-content-left-tips">
                            {{ $t('setting.enterprise.overall.color.tip1') }}
                        </div>
                        <div class="enterprise-color-content-left-save">
                            <el-button type="primary" :disabled="!isCanSave" @click="saveColor">
                                {{ $t('common.base.save') }}
                            </el-button>
                            <el-button @click="resetColor" v-if="systemThemeColor != '#13C2C2' || navBgColor != '#2D3F4C'">
                                {{ $t('common.base.reset') }}
                            </el-button>
                        </div>
                    </div>
                    <div class="enterprise-color-content-right">
                        <preview :navBgColor="navBgColor" :systemThemeColor="systemThemeColor"></preview>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="isShowDialog" :title="$t('setting.enterprise.overall.domain.title')" width="500px">
            <div>{{ $t('setting.enterprise.overall.domain.address') }}</div>
            <div style="display: flex;">
                <el-input :placeholder="$t('setting.enterprise.overall.domain.placeholder')" class="input_domain" v-model="domain"></el-input>
                <el-input placeholder="shb.ltd" disabled class="input_fixed"></el-input>
                <div class="icon iconfont icon-yitongguo" v-if="isCanUse"></div>
                <div class="icon iconfont icon-butongyi" v-if="!isCanUse"></div>
            </div>
            <slot name="footer">
                <span slot="footer" class="dialog-footer">
                    <el-button @click="isShowDialog = false">{{ $t('common.base.cancel') }}</el-button>
                    <el-button type="primary" @click="saveDomain">
                        {{ $t('common.base.submit') }}
                    </el-button>
                </span>
            </slot>
        </el-dialog>
    </div>
</template>

<script>
import { isCanUseDomain, settingInfo, getSettingInfo } from "../api"
import preview from './preview.vue'
import { getRootWindow } from '@src/util/dom';
import { hexToHsv, hexToRgbObj, isColorInRange, hexToHsb } from '@src/util/color';
import { saveValueAddedClue } from '@src/api/Clue';

export default {
    name: "overall",
    props: {
        globalSettingParam: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            // 是否显示域名配置
            isShowDomain: true,
            // 域名地址
            domainAddress: '',
            // 申请状态
            applyStatus: '',
            //组织代码
            organizationCode: '',
            // 组织代码申请状态
            organizationCodeStatus: '',
            // 导航背景色
            navBgColor: '',
            // 系统主题色
            systemThemeColor: '',
            // 颜色值是否符合Android要求
            isAndroidColor: true,
            // 系统主题色是否合适
            isSuitableSystemColor: true,
            // 导航背景色是否合适
            isSuitableNavBgColor: true,
            // 域名
            domain: '',
            // 打开弹窗类型 1:保存域名 0:修改域名
            openDialogKind: 1,
            oldValue: {
                navBgColor: '#2D3F4C',
                systemThemeColor: '#13C2C2',
                domainNameAddress: '',
                suffixDomain: '.shb.ltd',
                applicationStatus: 0,
            },
            isShowDialog: false,
            isCanUse: false,
            isCanSave: false,
        }
    },
    components: {
        preview
    },
    created() {
        this.domainAddress = (this.globalSettingParam?.domainNameAddress || '') + (this.globalSettingParam?.suffixDomain || '');
        this.domain = this.globalSettingParam?.domainNameAddress || '';
        this.applyStatus = this.globalSettingParam?.applicationStatus || '';
        this.organizationCodeStatus = this.globalSettingParam?.organizationCodeStatus || '';
        this.navBgColor = this.globalSettingParam.navigationBackgroundColor || '#2D3F4C';
        this.systemThemeColor = this.globalSettingParam.systemThemeBackgroundColor || '#13C2C2';
        this.organizationCode = this.globalSettingParam.organizationCode || '';
        this.oldValue = {
            navBgColor: this.globalSettingParam.navigationBackgroundColor || '#2D3F4C',
            systemThemeColor: this.globalSettingParam.systemThemeBackgroundColor || '#13C2C2',
            domainNameAddress: this.globalSettingParam?.domainNameAddress || '',
            suffixDomain: '.shb.ltd',
            applicationStatus: this.globalSettingParam?.applicationStatus || 0,
        }
        // 是否显示域名配置
        this.isShowDomain = getRootWindow(window)?.grayAuth?.EXCLUSIVE_DOMAIN_CONFIG_GRAY;
    },
    methods: {
        openDialog(kind) {
            this.openDialogKind = kind;
            this.isShowDialog = true;
        },
        // 保存域名
        saveDomain() {
            if (this.isCanUse) {
                const params = {
                    globalSettingParam: {
                        domainNameAddress: this.domain,
                        suffixDomain: '.shb.ltd',
                        applicationStatus: 0,
                        // organizationCode: this.organizationCode,
                        // organizationCodeStatus: 0,
                        navigationBackgroundColor: this.navBgColor,
                        systemThemeBackgroundColor: this.systemThemeColor
                    },
                    tenantId: JSON.parse(getRootWindow(window)._init).user.tenantId,
                    type: '1'
                }
                settingInfo(params).then(res => {
                    if (res.status == 0) {
                        getSettingInfo({ tenantId: JSON.parse(getRootWindow(window)._init).user.tenantId }).then(res => {
                            if (res.status == 0) {
                                this.organizationCode = res.data?.settingPageParam?.globalSettingParam?.organizationCode;
                                this.applyStatus = res.data?.settingPageParam?.globalSettingParam?.applicationStatus;
                            }
                        })
                        this.$message.success('申请已提交');
                        this.domainAddress = this.domain + '.shb.ltd';
                        saveValueAddedClue({
                            type: 20,
                        })
                        this.isShowDialog = false;
                    } else {
                        this.$message.error(res.message);
                    }
                })
            } else {
                this.$message.error('域名不可用');
            }
        },
        // 复制域名
        async copyToClipboard() {
            try {
                await navigator.clipboard.writeText(this.domainAddress);
                this.$message.success(this.$t('common.base.tip.copySuccess'));
            } catch (err) {
                this.$message.error(this.$t('common.base.tip.copyFail'));
            }
        },
        // 申请组织代码
        applyOrganization() {
            const params = {
                globalSettingParam: Object.assign({}, this.oldValue),
                tenantId: JSON.parse(getRootWindow(window)._init).user.tenantId,
                type: '4'
            }
            settingInfo(params).then(res => {
                if (res.status == 0) {
                    this.$message.success('申请已提交');
                    getSettingInfo({ tenantId: JSON.parse(getRootWindow(window)._init).user.tenantId }).then(res => {
                        if (res.status == 0) {
                            this.organizationCode = res.data?.settingPageParam?.globalSettingParam?.organizationCode;
                            this.organizationCodeStatus = res.data?.settingPageParam?.globalSettingParam?.organizationCodeStatus;
                        }
                    })
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        // 保存颜色
        saveColor() {
            const params = {
                globalSettingParam: {
                    domainNameAddress: this.domainAddress.endsWith('.shb.ltd') ? this.domainAddress.slice(0, -8) : this.domainAddress,
                    suffixDomain: this.applyStatus? '.shb.ltd': '',
                    applicationStatus: this.applyStatus,
                    // organizationCode: this.organizationCode,
                    // organizationCodeStatus: this.organizationCodeStatus,
                    navigationBackgroundColor: this.navBgColor,
                    systemThemeBackgroundColor: this.systemThemeColor
                },
                tenantId: JSON.parse(getRootWindow(window)._init).user.tenantId,
                type: '1'
            }
            settingInfo(params).then(res => {
                if (res.status == 0) {
                    if (this.navBgColor == '#2D3F4C' && this.systemThemeColor == '#13C2C2') {
                        this.$message.success(this.$t('common.base.resetSuccess'));
                    } else {
                        this.$message.success(this.$t('common.base.saveSuccess'));
                    }
                    this.isCanSave = false;
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        // 重置颜色
        resetColor() {
            this.navBgColor = '#2D3F4C';
            this.systemThemeColor = '#13C2C2';
            this.saveColor();
        },
        // 颜色校验函数
        checkColorContrastWithWhite(hexColor) {
            // 验证十六进制颜色格式
            if (!/^#([0-9A-F]{3}){1,2}$/i.test(hexColor)) {
                return false;
            }

            const { s, v } = hexToHsv(hexColor);
            // 当饱和度小于0.7或当亮度小于0.7时，提示
            if (s < 0.7 || v < 0.7) {
                return false;
            } else {
                return true;
            }
        },
        /**
         * @description 检测导航背景颜色是否合法
         */
        checkColorNavBg(hexColor) {
            // 验证十六进制颜色格式
            if (!/^#([0-9A-F]{3}){1,2}$/i.test(hexColor)) {
                return false;
            }
            const [h, s, b] = hexToHsb(hexColor);
            if (s < 20 && b > 80) {
                return false
            } else {
                return true
            }
        },
        isValidAndroidColor(hexColor) {
            // 验证安卓颜色格式
            if (!/^#([0-9A-F]{3}){1,2}$/i.test(hexColor)) {
                return false;
            }
            const {r,g,b} = hexToRgbObj(hexColor)
            if (!isColorInRange(r,g,b)) {
                return false
            } else {
                return true
            }
        }
    },
    mounted() {
    },
    watch: {
        domain(val) {
            // 防抖校验域名是否可用
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                if (val.trim().length == 0) {
                    this.isCanUse = false;
                    return;
                }
                isCanUseDomain({ domain: val + '.shb.ltd' }).then(res => {
                    if (res?.data) {
                        this.isCanUse = true;
                    } else {
                        this.isCanUse = false;
                    }
                });
            }, 500);
        },
        navBgColor(n, o) {
            this.isSuitableNavBgColor = this.checkColorNavBg(n);
            if (o) {
                this.isCanSave = true;
            }
        },
        systemThemeColor(n, o) {
            this.isAndroidColor = this.isValidAndroidColor(n);
            this.isSuitableSystemColor = this.checkColorContrastWithWhite(n);
            if (o) {
                this.isCanSave = true;
            }
        },
    }
}
</script>

<style lang="scss" scoped>
::v-deep .is-disabled:not(.el-input) {
    background-color: var(--color-primary-light-3) !important;
    border-color: var(--color-primary-light-3) !important;
}
::v-deep .is-disabled:not(.el-input):hover {
    background-color: var(--color-primary-light-3) !important;
    border-color: var(--color-primary-light-3) !important;
}
.input_domain {
    width: 240px;

    ::v-deep .el-input__inner {
        border-radius: 4px 0 0 4px;
        margin-top: 5px;
    }
}

.input_fixed {
    width: 150px;

    ::v-deep .el-input__inner {
        border-radius: 0 4px 4px 0;
        border-left: none;
        margin-top: 5px;
    }
}

.icon-yitongguo {
    color: #67C23A;
    margin-left: 8px;
    line-height: 40px;
}

.icon-butongyi {
    color: #F56C6C;
    margin-left: 8px;
    line-height: 40px;
}

.colorPicker {
    width: 34px;
    height: 34px;
    padding: 0px 2px;
    border: 1px solid #DCDEE0;
    border-radius: 2px;
    background-color: #fff;
}

.enterprise-overall-setting {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    border-radius: 4px;

    .enterprise-title {
        font-size: 18px;
        font-weight: 500;
        color: #262626;
        padding: 12px 16px;
        height: 50px;
        border-bottom: 1px solid #E4E7ED;
    }

    .enterprise-content {
        padding: 20px;

        .enterprise-domain {
            padding-bottom: 16px;
            border-bottom: 1px solid #E4E7ED;

            .enterprise-domain-title {
                font-size: 14px;
                font-weight: 500;
                color: #262626;
                display: flex;

                &-tip {
                    color: #8c8c8c;
                    margin-left: 8px;
                }
            }

            .enterprise-domain-content {
                padding: 5px 0;
                margin-top: 8px;

                .domain {
                    display: flex;
                    align-items: center;
                    height: 34px;
                    .title {
                        display: flex;
                        align-items: center;
                        margin-right: 8px;
                    }
                    .status {
                        display: flex;
                        align-items: center;
                        margin-left: 24px;
                        .domainStateSuccess {
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background-color: #67C23A;
                            margin-right: 8px;
                        }

                        .domainStateReview {
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background-color: #E6A23C;
                            margin-right: 8px;
                        }
                    }
                }
                .organization {
                    display: flex;
                    align-items: center;
                    height: 34px;
                    .title {
                        display: flex;
                        align-items: center;
                        margin-right: 8px;
                    }
                    .status {
                        display: flex;
                        align-items: center;
                        margin-left: 24px;
                        .domainStateSuccess {
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background-color: #67C23A;
                            margin-right: 8px;
                        }

                        .domainStateReview {
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background-color: #E6A23C;
                            margin-right: 8px;
                        }
                    }
                }
            }

            .enterprise-domain-footer {
                margin-top: 6px;
            }
        }

        .enterprise-color {
            padding: 16px 0 4px 0;

            .enterprise-color-title {
                font-size: 14px;
                font-weight: 500;
                color: #262626;
                margin-bottom: 8px;
            }

            .enterprise-color-content {
                display: flex;
                align-items: center;
                overflow: hidden;

                .enterprise-color-content-left {
                    width: 400px;
                    min-width: 400px;
                    position: relative;
                    height: 326px;
                    padding-right: 24px;

                    .enterprise-color-content-left-item {
                        display: flex;
                        align-items: center;
                        height: 42px;
                        margin-bottom: 12px;
                        &-tip {
                            color: #F56C6C;
                            line-height: 20px;
                            font-size: 12px;
                            margin-left: 8px;
                        }

                        &-title {
                            font-size: 14px;
                            font-weight: 400;
                            color: #262626;
                            margin-right: 8px;
                        }

                        i {
                            color: #fff;
                            font-size: 11px;
                            position: relative;
                            right: 23px;
                        }
                    }

                    .enterprise-color-content-left-tips {
                        color: #E6A23C;
                        background-color: #FCF6EC;
                        padding: 8px 12px;
                    }

                    .enterprise-color-content-left-save {
                        position: absolute;
                        bottom: 0;
                    }
                }

                .enterprise-color-content-right {
                    width: 626px;
                    height: 326px;
                    margin-left: 24px;
                }
            }
        }
    }
}
</style>